<template>
  <div class="main">
    <div class="topbtn">
      <top-back @child-back="parentEvent">
        <template v-slot:btn>
          <button class="preserve" @click="save">保存</button>
        </template>
      </top-back>
    </div>

    <div class="add-con">
      <div class="add-box">
        <div class="form-box">
          <blue-title :text="'基础信息'"></blue-title>
          <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="{ span: 20 }">
            <a-row class="row_box">
              <a-col :span="12">
                <a-form-item label="我是标题" name="name">
                  <a-input v-model:value="formState.name" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="Activity zone">
                  <a-select v-model:value="formState.region" placeholder="please select your zone">
                    <a-select-option value="shanghai">Zone one</a-select-option>
                    <a-select-option value="beijing">Zone two</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="row_box">
              <a-col :span="12">
                <a-form-item label="我是标题11">
                  <a-checkbox-group v-model:value="formState.checkbox" :options="plainOptions" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="我是标题11">
                  <a-range-picker v-model:value="formState.timeRange" value-format="YYYY-MM-DD" />
                </a-form-item>

              </a-col>
            </a-row>
            <a-row class="row_box">
              <a-col :span="12">
                <a-form-item label="我是标题">
                  <a-date-picker v-model:value="formState.time" value-format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="Activity zone">
                  <a-switch v-model:checked="formState.delivery" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="row_box">
              <a-col :span="24">
                <a-form-item label="Activity zone">
                  <a-select v-model:value="formState.region1" placeholder="please select your zone" mode="tags">
                    <a-select-option value="shanghai">Zone one</a-select-option>
                    <a-select-option value="beijing">Zone two</a-select-option>
                    <a-select-option value="beijing2">Zone two1</a-select-option>
                    <a-select-option value="beijing3">Zone two2</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="row_box">
              <a-col :span="23">
                <div class="label">我是输入框：</div>
                <a-textarea v-model:value="formState.textarea" placeholder="textarea with clear icon" allow-clear />
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="upload-box">
          <blue-title :text="'基础信息'"></blue-title>
          <a-row class="row_box">
            <a-col :span="12">
              <div class="ipt-box">
                <div class="label required">文件上传：</div>
                <fileUpload ref="fileimg" :fileDatas="imgList1"></fileUpload>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="ipt-box">
                <div class="label">文件上传1：</div>
                <fileUpload ref="fileimg1" :fileDatas="imgList1"></fileUpload>
              </div>
            </a-col>

          </a-row>
          <a-row class="row_box">
            <a-col :span="24">
              <div class="ipt-box">
                <div class="label">图片上传：</div>
                <imgUpload ref="fileimg2" :pfileList="imgList2"></imgUpload>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="right-box">
        <blue-title :text="'地图定位'"></blue-title>
        <a-row class="row_box">
          <a-col :span="24">
            <a-form-item label="详细地址：">
              <a-input v-model:value="address" />
            </a-form-item>
          </a-col>
        </a-row>
        <div class="map-box">
          <mapdemo @toInfo="getInfo"></mapdemo>
        </div>

      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRaw } from 'vue'
import topBack from "@/components/Topback/index.vue";
import blueTitle from "@/components/blueTitle/index.vue";
import mapdemo from "@/components/map/index.vue";
import fileUpload from "@/components/fileUpload/index.vue";
import imgUpload from "@/components/imgUpload/index.vue";
import { Form } from 'ant-design-vue';
const labelCol = { style: { width: '120px' } };
const plainOptions = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' }
];
const imgList1 = ref([
  {
    uid: "1",
    name: "xxx.png",
    status: "done",
    response: "Server Error 500", // custom error message to show
    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
  },
]);

const imgList2 = ref([
  {
    uid: "-1",
    name: "image.png",
    status: "done",
    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
  },
]);
const address = ref("")
const formState = ref({
  textarea: "",
  checkbox: ['Apple'],
  name: '',
  region1: ['beijing', 'beijing1'],
  region: undefined,
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  time: "2023-09-27",
  timeRange: ['2023-10-04', '2023-10-05'],
})

const fileimg = ref<HTMLElement>()

type infoType = {
  lng: number,
  lat: number,
  address: string
}
const getInfo = (data: infoType) => {
  console.log(data);
  address.value = data.address

}
const rules = ref({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'change' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ]
})



const useForm = Form.useForm;
const { resetFields, validate, validateInfos } = useForm(formState, rules, {
  onValidate: (...args) => console.log(...args),
});



const parentEvent = () => {
  console.log("返回");

}


const save = () => {
  console.log(fileimg.value);
  validate()
    .then(() => {
      console.log(toRaw(formState.value));


    })
    .catch(err => {
      console.log('error', err);
    });
}


</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  padding: 20px;

  .preserve {
    min-width: 88px;
    padding: 0 18px;
    height: 32px;
    background-color: rgba(24, 139, 255, 1);
    border: 1px solid rgba(24, 139, 255, 1);
    border-radius: 2px;
    cursor: pointer;
    color: rgba(255, 255, 255, 1);
  }

  .add-con {
    width: 100%;
    height: calc(100% - 52px);
    display: flex;
    justify-content: space-between;

    .add-box {
      width: calc(50% - 10px);
      height: 100%;
      overflow-y: auto;



      .form-box {
        padding: 20px;
        background: #fff;

        .row_box {
          .label {
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            margin-bottom: 8px;
          }

          .ant-col:nth-child(2) {
            .ant-form-item {
              padding-right: 0px;
            }
          }

          .ant-form-item {
            display: flex;
            margin-right: 20px;
            margin-bottom: 15px;
            padding-right: 20px;

            // width: 30%;
            ::v-deep .ant-form-item-label {
              // width: 100%;
              line-height: 32px;
              text-align: left;
            }

            ::v-deep .ant-form-item-control {
              line-height: 32px;



              .ant-select-selection {
                border-radius: 2px;
              }

              .ant-input {
                border-radius: 2px;
                height: 32px;
                width: 200px;
              }

              textarea.ant-input {
                height: auto;
                width: 100%;
              }

              .ant-picker {
                height: 32px;
                width: 200px;
                padding: 4px 11px 4px;
              }

              .ant-select {
                width: 200px;
              }
            }
          }

          .item-input {
            .ant-form-item {
              padding-right: 0px;
            }
          }

          .item-textarea {
            width: 100%;
            display: flex;
            margin-right: 20px;
            margin-bottom: 20px;

            // padding-right: 20px !important;
            ::v-deep .ant-form-item-label {
              width: 100%;
              line-height: 32px;
              text-align: left;
            }

            ::v-deep .ant-form-item-control-wrapper {
              width: 100%;
              line-height: 32px;

              .ant-input {
                height: 80px;
                border-radius: 2px;
              }

              .ant-form-item-control {
                line-height: 32px;
              }
            }
          }

          .ant-col-24,
          .ant-col-20 {
            .ant-form-item-control {
              .ant-select {
                width: 100%;
              }

              .ant-input {
                height: unset;
                width: 100%;
              }
            }

          }
        }
      }

      .upload-box {
        margin-top: 20px;
        padding: 20px;
        background: #fff;

        .ipt-box {
          margin-bottom: 10px;

          .label {
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            margin-bottom: 8px;
          }
        }

        .row_box:last-child {
          .ipt-box {
            margin-bottom: 0;
          }
        }



      }


    }

    .right-box {
      width: calc(50% - 10px);
      height: 100%;
      padding: 20px;
      background-color: #fff;

      .ant-input {
        border-radius: 2px;
        height: 32px;
      }

      .map-box {
        width: 100%;
        height: calc(100% - 97px);
        margin-top: 20px;
      }

    }



  }
}
</style>